<template>
  <div class="editpersonal">
    <myheader title="编辑个人信息">
      <!-- slot:通过slot可以指定将这个结构填充到子组件的哪个插槽中 -->
      <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"></span>
      <!-- <span slot='right'>搜索</span> -->
    </myheader>
    <!-- 图片及上传 -->
    <div class="userimg">
      <img :src="current.head_img" alt />
      <van-uploader :after-read="afterRead" />
    </div>
    <mycell title="昵称" :desc="current.nickname" @click="nickshow = !nickshow"></mycell>
    <!-- <van-dialog v-model="nickshow" title="修改昵称" show-cancel-button @confirm='updatenickname'>
        <van-field :value="current.nickname" label="文本" placeholder="请输入用户名" ref='nick' required/>
    </van-dialog>-->
    <van-dialog v-model="nickshow" title="修改昵称" show-cancel-button @confirm="updatenickname">
      <van-field ref="nick" :value="current.nickname" placeholder="请输入昵称" required label="昵称" />
    </van-dialog>

    <mycell title="密码" :desc="current.password" type="pass" @click="passshow=!passshow"></mycell>
    <van-dialog v-model="passshow" title="修改密码" show-cancel-button @confirm="updatepassword">
      <van-field ref="pass1" placeholder="请输入原始密码" required label="原密码" />
      <van-field ref="pass2" placeholder="请输入新密码" required label="新密码" />
    </van-dialog>
    <mycell title="性别" :desc="current.gender==1?'男':'女'"></mycell>
  </div>
</template>

<script>
import myheader from "@/components/myheader.vue";
import mycell from "@/components/mycell.vue";
import { getUserDetail, editPersonalInfo } from "@/apis/users.js";
import { uploadFile } from "@/apis/fileUpload.js";
import myaxios from "@/utils/myaxios.js";

export default {
  data() {
    return {
      current: {},
      nickshow: false,
      passshow: false,
    };
  },
  components: {
    myheader,
    mycell,
  },
  async mounted() {
    let id = this.$route.params.id;
    // 根据参数获取用户详情数据，实现动态渲染
    let res = await getUserDetail(id);
    console.log(res);
    if (res.data.message == "获取成功") {
      this.current = res.data.data;
      // 对图片进行处理
      // 1.如果 有图片数据，应该在路径前面拼接 基准路径
      // 2.如果没有图片数据，也应该赋值一个默认图片路径
      if (res.data.data.head_img) {
        this.current.head_img =
          myaxios.defaults.baseURL + this.current.head_img;
      } else {
        this.current.head_img =
          myaxios.defaults.baseURL + "/uploads/images/default.png";
      }
    }
  },
  methods: {
    async afterRead(file) {
      let formdata = new FormData();
      formdata.append("file", file.file);
      // 此时可以自行将文件上传至服务器
      let res = await uploadFile(formdata);
      // console.log(res)
      if (res.data.message == "文件上传成功") {
        this.current.head_img = myaxios.defaults.baseURL + res.data.data.url;
        // 上传文件成功文件，立刻进行用户图像的更新,注意所需要的参数数据是后台返回的图片的目录数据，而不是包含了服务器地址的
        let result = await editPersonalInfo(this.current.id, {
          head_img: res.data.data.url,
        });
        console.log(result);
        if (result.data.message == "修改成功") {
          this.$toast.success("修改用户头像成功");
        } else {
          this.$toast.fail("修改用户头像成功");
        }
      } else {
        this.$toast.fail("文件上传失败，请重试");
      }
    },
    async updatenickname() {
      let name = this.$refs.nick.$refs.input.value;
      console.log(name);
      let result = await editPersonalInfo(this.current.id, { nickname: name });
      console.log(result);
      if (result.data.message == "修改成功") {
        this.$toast.success("修改昵称成功");
      } else {
        this.$toast.fail("修改昵称成功");
      }
    },
    updatepassword() {},
  },
};
</script>

<style lang="less" scoped>
.editpersonal {
  .userimg {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 90/360 * 100vw;
      height: 90/360 * 100vw;
      border-radius: 50%;
    }
    /deep/.van-uploader__upload {
      width: 90/360 * 100vw;
      height: 90/360 * 100vw;
    }
    /deep/.van-uploader {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }
  }
}
</style>